<template>
  <div class='myNews'>
    <div class='wrap' id='wrap'>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="私信" name="direct">
          <span slot="label">
            <el-badge :value="getPrNoRead" :max="99" >
              <span>案件交流</span>
            </el-badge>
          </span>
          <keep-alive>
            <direct ref="direct"/>
          </keep-alive>
          <!-- <el-tabs tab-position="top" v-model="directActive" type="border-card"  @tab-click="directTabsClick">
            <el-tab-pane label="发明人私信" name="user" v-if="/^(2|4)$/.test(role_id)" >
              <keep-alive>
                <direct ref="direct"/>
              </keep-alive>
            </el-tab-pane>
            <el-tab-pane label="审核员私信" name="auditor" v-if="/^(2)$/.test(role_id)">
              <keep-alive>
                <direct ref="direct"/>
              </keep-alive>
            </el-tab-pane>
            <el-tab-pane label="代理人私信" name="agent" v-if="/^(3)$/.test(role_id)">
              <keep-alive>
                <direct ref="direct"/>
              </keep-alive>
            </el-tab-pane>
          </el-tabs> -->
        </el-tab-pane>
        <el-tab-pane label="通知" name="notice">
          <span slot="label">
            <el-badge :value="getNoRead" :max="99" >
              <span>站内公告</span>
            </el-badge>
          </span>
          <notice ref="notice"/>
        </el-tab-pane>
      </el-tabs>
    </div>

  </div>
</template>

<script>
import notice from './components/notice'
import direct from './components/direct'
export default {
  data () {
    return {
      activeName: 'direct',
      directActive: '',
      role_id: this.$store.state.user.role_id
    }
  },
  components: {
    notice,
    direct
  },
  created () {
    this.$nextTick(() => {
      this.$refs['direct'].getData()
    })
  },
  computed: {
    getNoRead () {
      return this.$store.state.roleInfo.noRead
    },
    getPrNoRead () {
      return this.$store.state.roleInfo.prNoRead
    },
  },
  methods: {
    directTabsClick(e) {
      if (e.name == 'user') {
        let params = {
          role_id: 5
        }
        this.$refs['direct'].getData(params)
      } else if (e.name == 'auditor') {
        let params = {
          role_id: 3
        }
        this.$refs['direct'].getData(params)
      } else if (e.name == 'agent') {
        let params = {
          role_id: 2
        }
        this.$refs['direct'].getData(params)
      }
    },
    handleClick(e) {
      if (e.name == 'notice') {
        this.$refs['notice'].getData()
      } else if (e.name == 'direct') {
        this.$refs['direct'].getData()
        this.$refs['direct'].showDel = false
      }
    }
  }
}
</script>

<style lang='less' type='text/css'>
  .myNews{
    background:#EBEEF5;
    height: 100%;
    .wrap {
      padding:0 20px;
      width: 60%;
      height: 100%;
      background: #fff;
      margin: 0 auto;
    }
    #wrap {
      .el-badge {
        .el-badge__content {
          border: 0px;
        }
        .is-fixed {
          padding: 1px 9px;
          top: 13px;
        }

      }
      .el-tabs {
        height: 100%;
        .el-tabs__content {
          height: calc(100% - 70px);
          overflow-y: auto;
        }
        .el-tabs__item {
          height: 60px;
          line-height: 60px;
        }
      }
    }
  }
</style>
